import { useEffect, useState, memo } from "react";
import { Button } from "antd";
import { Video } from '@/components';

function Vports() {
  const data = [
    {
      id: 1,
      type: 'flv',
      url: 'http://localhost:3030/stream.flv',
      active: true,
    },
    {
      id: 2,
      type: 'flv',
      url: 'http://localhost:3030/stream.flv',
      active: true,
    },
    {
      id: 3,
      type: 'flv',
      url: 'http://localhost:3030/stream.flv',
      active: true,
    },
    {
      id: 4,
      type: 'flv',
      url: 'http://localhost:3030/stream.flv',
      active: true,
    },
    {
      id: 5,
      type: 'flv',
      url: 'http://localhost:3030/stream.flv',
      active: false,
    },
    {
      id: 6,
      type: 'flv',
      url: 'http://localhost:3030/stream.flv',
      active: false,
    },
    {
      id: 7,
      type: 'flv',
      url: 'http://localhost:3030/stream.flv',
      active: false,
    },
    {
      id: 8,
      type: 'flv',
      url: 'http://localhost:3030/stream.flv',
      active: false,
    },
    {
      id: 9,
      type: 'flv',
      url: 'http://localhost:3030/stream.flv',
      active: false,
    },
  ];

  const configMap = {
    oneVideo: {
      type: 1,
      classNames: {
        container: ["flex video-wrap"],
        main: ["transition-all basis-3/4  grid gap-4"],
        menu: ["overflow-y-scroll transition-all basis-1/4 "],
      },
      activeList: [data[0]],
    },
    fourVideo: {
      type: 4,
      classNames: {
        container: ["flex video-wrap"],
        main: ["transition-all basis-3/4 grid grid-cols-2 p-2 gap-2 bg-amber-200"],
        menu: ["overflow-y-scroll transition-all basis-1/4 "],
      },
      activeList: [data[0], data[1], data[2], data[3]],
    },
    allVideo: {
      type: 0,
      classNames: {
        container: ["flex video-wrap"],
        main: ["transition-all hidden"],
        menu: [
          "transition-all basis-full  grid grid-flow-row-dense grid-cols-3 grid-rows-3 gap-4",
        ],
      },
      activeList: [],
    },
  };

  const [activeConfig, setActiveConfig] = useState(configMap["fourVideo"]);
  const [videos, setVideos] = useState<Array<object>>(
    data.filter((item) => item.active)
  );
  const switchLayout = (type: string) => {
    // configMap[fourVideo].activeList = videos;
    // 四个切换为零的时候要清空videos 逻辑没想明白
    const config = configMap[type];

    // 补丁代码
    const length = config.type;
    if (videos.length > length) {
      const list = videos.slice(0, length);
      setVideos(list);
    }

    setActiveConfig(config);
    //  setVideos([...config.activeList]);
  };

  const handleClick = (id: number) => {
    if (activeConfig.type === 0) {
      return;
    }
    const video = videos.find((item) => item.id === id);
    if (!video) {
      const [_, ...list] = videos;
      setVideos([...list, video]);
    }
  };

  const getClassName = (classNames: Array<string>): string => {
    if (!classNames) {
      return "";
    }
    return classNames.join(" ");
  };

  const activeClassName = (id: number) => {
    const classNames = ["flex justify-center align-center m-2 border-2"];
    if (activeConfig.type === 0) {
      return getClassName(classNames);
    }
    const video = videos.find((video) => video.id === id);
    if (video) {
      classNames.push("border-4 border-indigo-500");
    }
    return getClassName(classNames);
  };

  // useEffect(() => {
  //   if (videos.length === 0) {
  //     // 全部显示时恢复初始设置
  //     const list = configMap["fourVideo"].activeList;
  //     setVideos([...list]);
  //   } else if (videos.length > 0 && videos.length < activeConfig.type) {
  //     // 单视频转为四视频时补全剩下的三个元素
  //     // 由全部转为单视频和由全部转为四视频
  //     // 如果单视频页面选择的元素在四视频的默认选项中有，就加入另外三个
  //     const isRepeat = configMap["fourVideo"].activeList.findIndex(
  //       (item) => item.id === videos[0].id
  //     );
  //     if (isRepeat !== -1) {
  //       const extraList = configMap["fourVideo"].activeList.filter(
  //         (item) => item.id !== videos[0].id
  //       );
  //       setVideos([...videos, ...extraList]);
  //     } else {
  //       const [_, ...list] = activeConfig.activeList;
  //       setVideos([...videos, ...list]);
  //     }
  //   } else if (videos.length > 0 && videos.length > activeConfig.type) {
  //     // 四视频转为单视频时只显示一个
  //     setVideos([videos[0]]);
  //   }
  // }, [activeConfig]);

  useEffect(() => {
    // init();
  }, []);
  return (
    <div className="h-full flex flex-col">
      <div className="tool-bar flex justify-between ">
        <div></div>
        <div className="space-x-4 p-2">
          <Button type="primary" onClick={() => switchLayout("allVideo")}>
            平面视频显示
          </Button>
          <Button type="primary" onClick={() => switchLayout("oneVideo")}>
            单视频显示
          </Button>
          <Button type="primary" onClick={() => switchLayout("fourVideo")}>
            四视频显示
          </Button>
        </div>
      </div>

      <div className={getClassName(activeConfig?.classNames?.container)}>
        <div className={getClassName(activeConfig?.classNames?.main)}>
          {videos.map((item) => (
            <div
              className="flex justify-center align-center border-2"
              key={item.id}
            >
              <Video  url={item.url} type={item.type}></Video>
            </div>
          ))}
        </div>
        <div className={getClassName(activeConfig?.classNames?.menu)}>
          {data.map((item) => (
            <div
              key={item.id}
              className={activeClassName(item.id)}
              data-active={true}
              onClick={() => handleClick(item.id)}
            >
              <Video url={item.url} type={item.type} style={{ maxHeight: "100%" }}>

              </Video>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

export default memo(Vports);
